<template>
  <view class="pures">
    <view class="pures-content">
<!--      钱包头部-->
      <view class="pures-head">
        <view class="pures-head-left">
          <view class="pures-head-title">
            <text class="pures-head-title-text">可提现余额(元)</text>
            <u-icon @click="whyShow = true" class="pures-head-title-icon" name="question-circle" color="#ffffff" size="35"></u-icon>
          </view>
          <view class="pures-head-num">{{userInfo.amount}}</view>
        </view>
        <!--    提现按钮-->
        <view class="san_btn_wrap">
          <view class="san_btn_item" @click="lijitixian()">
            <text>立即提现</text>
          </view>
        </view>
        <!--<view class="pures-head-right">
          <view class="pures-head-right-text">结算明细></view>
        </view>-->
      </view>
<!--      钱包列表-->
      <!--<view class="pures-list">
        <view class="pures-list-item">
          <view class="pures-list-top">
            <image class="pures-list-top-img" :src="`https://td.lszbg.com/public/uploads/h5/home/kefu.png`"></image>
            <view class="pures-list-top-text">
              <view class="pures-list-top-title">外婆味道(新亚洲体育城店)</view>
              <view class="pures-list-top-word">可提现余额(元)</view>
              <view class="pures-list-top-num">156</view>
            </view>
          </view>
          <u-line color="#F6F6F6"></u-line>
          <view class="pures-list-bottom">
            <view @click="detailsFun()" class="pures-list-btn pures-btn-details">余额明细</view>
            <view @click="cashFun" class="pures-list-btn pures-btn-cash">余额提现</view>
          </view>
        </view>
        <view class="pures-list-item">
          <view class="pures-list-top">
            <image class="pures-list-top-img" :src="`https://td.lszbg.com/public/uploads/h5/home/kefu.png`"></image>
            <view class="pures-list-top-text">
              <view class="pures-list-top-title">外婆味道(新亚洲体育城店)</view>
              <view class="pures-list-top-word">可提现余额(元)</view>
              <view class="pures-list-top-num">156</view>
            </view>
          </view>
          <u-line color="#F6F6F6"></u-line>
          <view class="pures-list-bottom">
            <view @click="detailsFun()" class="pures-list-btn pures-btn-details">余额明细</view>
            <view @click="cashFun" class="pures-list-btn pures-btn-cash">余额提现</view>
          </view>
        </view>
        <view class="pures-list-item">
          <view class="pures-list-top">
            <image class="pures-list-top-img" :src="`https://td.lszbg.com/public/uploads/h5/home/kefu.png`"></image>
            <view class="pures-list-top-text">
              <view class="pures-list-top-title">外婆味道(新亚洲体育城店)</view>
              <view class="pures-list-top-word">可提现余额(元)</view>
              <view class="pures-list-top-num">156</view>
            </view>
          </view>
          <u-line color="#F6F6F6"></u-line>
          <view class="pures-list-bottom">
            <view @click="detailsFun()" class="pures-list-btn pures-btn-details">余额明细</view>
            <view @click="cashFun" class="pures-list-btn pures-btn-cash">余额提现</view>
          </view>
        </view>
      </view>-->
    <!-- 结算明细 -->
      <view class="pures-list">
        <view class="pures-list-tab">
          <!--<view class="pures-list-tab-left" @click="isTabActiveFun" :class="isTabActive ? 'pures-list-tab-active' : ''">
            <shop-list-pop :AllShopsList="shopListData" @changeShop="changeShop" ></shop-list-pop>
          </view>-->
          <view class="top_info pures-list-tab-left u-flex" @click="isTabActiveFun" :class="isTabActive ? 'pures-list-tab-active' : ''">
            <view class="allshop u-flex">
              <view class="ellipsis-one-line">{{FirstShop}}</view>
            </view>
            <view class="allshopright">
              <u-icon name="play-right-fill" size="24" color="#333"></u-icon>
            </view>
          </view>
          <view class="pures-list-tab-right" @click="timeClick" :class="isTabDate ? 'pures-list-tab-active' : ''">
            <text>开始/结束日期</text>
            <u-icon name="calendar" color="#888888" size="35"></u-icon>
          </view>
        </view>
        <view class="pures-list-content">
          <view class="m_list_wrap" >
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
                         @scrolltolower="lower" @scroll="scroll">
              <view class="m_list_item" v-for="(item,index) in SettlementDetailsList" :key="index">
                <view class="m_list_item_info">
                  <view class="m_head">
                    <image src="/static/images/Frame.png" class="m_head_img"></image>
                    <view class="m_head_text">{{item.shop_name}}</view>
                  </view>
                  <view class="m_title">
                    <view class="type_title">{{item.package_name}}</view>
                  </view>
                  <view class="m_time">{{item.create_time}}</view>
                </view>
                <view class="m_price">{{item.amount}}</view>
              </view>
            </scroll-view>
            <!--<u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText"
                        margin-bottom="60" />-->
          </view>
        </view>
        <!--加载更多-->
        <view class="chudijiazai">
          <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                      margin-bottom="30"/>
          <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
        </view>
      </view>
    </view>

    <!--店铺选择-->
    <u-popup v-model="shopShow" mode="bottom" border-radius="30" height="65%" closeable>
      <view class="pop">
        <view class="pop-content">
          <!--        标题-->
          <view class="pop-title"><text>选择店铺</text></view>
          <!--        搜索-->
          <view class="pop-search">
            <view @click="changeSearchFun" class="search-button">搜 索</view>
            <u-search v-model="shopSearchVal" placeholder="请输入店铺关键字" :show-action="false"  height="74" bgColor="#F6F6F6" color="#888888" :clearabled="false"></u-search>
          </view>
          <view class="pop-list">
            <scroll-view class="u-scroll-view" scroll-y="true">
              <view class="pop-item" v-for="(item, index) in shopListData" :key="index" >
                <radio-group @click="change(item, item.id)">
                  <label class="uni-list-cell uni-list-cell-pd u-flex pop-between" >
                    <view class="pop-item-left">
                      <view class="pop-item-left-text" :style="{color: item.id === current ? '#FF7A00' : '#333'}">{{item.name}}</view>
                    </view>
                    <view class="pop-item-right">
                      <u-icon v-if="item.id === current" name="checkmark-circle-fill" color="#FF7A00" size="48"></u-icon>
                      <text v-else class="checkIcon"></text>
                    </view>

                  </label>
                </radio-group>
              </view>
            </scroll-view>
          </view>
          <view class="pop-button">
            <button @click="cancelFun" class="submit-btn form-btn-cancel" size="mini">取消</button>
            <button @click="submitFun" class="submit-btn form-btn-sumbit" size="mini">确认</button>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 问号弹窗-->
    <u-popup v-model="whyShow" mode="center" border-radius="14" width="80%">
      <view class="why-box">
        <view class="why-content">购买平台为【领食惠探店】的订单:完成笔记3天后收入到账，到账后可提现;已核销但未完成笔记的订单，取消订单6天后收入到账，到账后可提现</view>
        <view class="why-btn" @click="whyShow = false">
          <text >我知道了</text>
        </view>
      </view>
    </u-popup>
    <!--日期开始和结束-->
    <u-calendar v-model="timeShow" :mode="mode" @change="timeShowFun"></u-calendar>
    <!--第一次提现，提示设置密码-->
    <u-popup v-model="setPasswordShow" mode="center" border-radius="14" width="80%" :closeable="true">
      <view class="set-password-box" style="padding: 30rpx">
        <view class="set-password-title" style="text-align: center;padding: 20rpx 0;">设置密码提示</view>
        <u-line color="#F6F6F6"></u-line>
        <view class="set-password-content" style="text-align: center;margin: 40rpx 0;">
          您还没有设置提现密码，请设置提现密码，设置后才能提现。
        </view>
        <u-line color="#F6F6F6"></u-line>
        <view class="set-password-btn" style="padding-top: 20rpx">
          <u-button type="warning" shape="circle" :ripple="false" :disabled="disabled" :loading="Payloading"
                    @click="setPasswordFun">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import ShopListPop from "@/components/shop-list/shop-list-pop.vue";

export default {
  components: {ShopListPop},
  data() {
    return {
      whyShow: false, //问号弹窗
      timeShow: false, //日期弹窗
      mode: 'range', //日期选择模式
      shopListData: [], //店铺列表数据
      FirstShop: '', //第一家店铺
      shopShow: false, //店铺列表弹窗
      shopVal: '', // 选中的店铺
      current: null, //选中状态
      shopSearchVal: '', // 搜索关键字
      shopSearchList: [],//店铺搜索列表
      isTabActive: false,//tab切换
      isTabDate: false, //tab日期切换
      customStyle: {
        width: '100%',
        height: '60rpx',
        background: '#FF6C0A',
        fontSize: '30rpx',
        lineHeight: '80rpx',
      },
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      SettlementDetailsList: [], //结算明细列表
      shopId: '', //店铺id
      startTime: '', //开始时间
      endTime: '', //结束时间
      pageSize: 1,
      userInfo: {},//用户信息
      setPasswordShow: false, //第一次提现，提示设置密码
    };
  },
  onLoad() {
    let that = this
    let token = uni.getStorageSync('token')
    if (!token) {
      uni.reLaunch({
        url: '/pages/logon/logon'
      })
    } else {
      that.GetUserInfo()
      that.GetshopList()
      that.GetSettlementDetails()
    }
  //  获取顶部高度

  },
  //触底加载
  onReachBottom() {
    let that = this
    that.loadText.nomore = '没有更多了'
    that.Bottomingrefresh = false
    this.loadingstatus = 'loading';
    setTimeout(function () {
      that.pageSize++;
      that.GetSettlementDetails()
      uni.hideNavigationBarLoading()
    }, 500);

  },
  methods: {
    scroll(){
      that.scrollTop = that.old.scrollTop - e.detail.deltaY
    },
    //店铺数据
    GetshopList(){
      let that = this
      that.$api.GetshopList().then(res => {
        console.log('店铺列表', res.data.result)
        let newList = [
          {
            id: 0,
            name: '全部店铺',
          }
        ]
        if (res.data.result.length !== 0){
          res.data.result.forEach(function (item, index) {
            newList.push({
              id: item.id,
              name: item.name
            })
          });
          that.shopListData = newList
          that.FirstShop = newList[0].name
          that.GetOrderList()
        } else {
          uni.showToast({
            title: '暂无店铺',
            icon: 'none',
          })
        }
      }).catch(err => {

      });
    },
    //获取用户信息
    GetUserInfo() {
      let that = this
      that.$u.post('/shop/user/info', {

      }).then(res => {
        console.log('账号信息', res)
        that.userInfo = res.result
        uni.setStorageSync('userinfo', res.result)
      }).catch(err => {

      });
    },

    //获取结算明细数据
    GetSettlementDetails(){
      let that = this
      that.$api.GetSettlementDetails({
        page: that.pageSize,//分页页码，数字类型
        limit: 10,//每页条数 默认10
        shop_id: that.shopId, //店铺ID
        start_time: that.startTime, //开始日期
        end_time: that.endTime, //结束日期
      }).then(res => {
        console.log('结算明细', res)
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        if (that.pageSize !== 1) {
          if (res.data.result.length !== 0) {
            that.loadingstatus = 'loading';
            that.SettlementDetailsList = that.SettlementDetailsList.concat(res.data.result)
          } else {
            that.loadingstatus = 'nomore'
          }
        } else {
          that.loadingstatus = 'nomore';
          that.SettlementDetailsList = res.data.result
        }
      }).catch(err => {
        that.skeletonLoading = false
        if (that.loadingstatus == 'loading') {
          that.loadingstatus = 'nomore'
          that.loadText.nomore = '网络好像出问题了~'
          that.Bottomingrefresh = true
        } else {
          that.shopsLists = []
          that.loadingstatus = 'loading'
          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          that.failTimeOutShow = true
        }
      });
    },
    // 店铺组件返回数据
    changeShop(res){
      let that = this
      that.pageSize = 1
      that.shopId = res
      that.GetSettlementDetails()
      console.log("商铺ID===", res)
    },
    isTabActiveFun(){
      this.shopShow  = true
      this.isTabActive = true
      this.isTabActive = true
      this.isTabDate = false
    },
    // 点击开始结束日期按钮
    timeClick(){
      this.isTabActive = false
      this.isTabDate = true
      this.timeShow = true
    },
    //日期范围弹窗
    timeShowFun(e){
      let that = this
      that.startTime = e.startDate
      that.endTime = e.endDate
      that.pageSize = 1
      that.GetSettlementDetails()
      console.log("开始结束日期", e)
    },
    //立即提现
    lijitixian() {
      let userInfo = uni.getStorageSync('userinfo')
      if(userInfo.cash_password){
        uni.navigateTo({
          url: '/subPackagePurse/pures/Cashwithdrawal'
        })
      }else{
        this.setPasswordShow  = true
      }
    },
    //第一次提现，提示设置密码
    setPasswordFun(){
      this.setPasswordShow  = false
      uni.navigateTo({
          url: '/subPackagePurse/account-settings/setPassword?type=3'
        })
    },
    detailsFun(item){
      uni.navigateTo({
        url: '/subPackagePurse/balance-details/balance-details'
      })
    },
    cashFun(){
      uni.navigateTo({
        url: ''
      })
    },
    // 商家列表选中
    change(item,itemId) {
      console.log('item', item)
      this.shopListData.forEach((item) => {
        if (item.id === itemId) {
          this.current = item.id
        }
      })
      this.shopVal = item
    },
    // 商家确认切换
    submitFun(){
      this.shopShow = false
      this.current = null
      this.FirstShop = this.shopVal.name
      let shop_id = this.shopVal.id
      console.log("选中的商家===",this.FirstShop)
      this.$emit('changeShop', shop_id)
    },
    // 收起商家弹窗
    cancelFun(){
      this.shopShow = false
      this.current = null
    },
    // 店铺切换弹窗搜索
    changeSearchFun() {
      let that = this
      // 提示输入店铺
      if(that.shopSearchVal == ''){
        uni.showToast({
          title: '请输入店铺名称',
          icon: 'none'
        })
      }
      // 搜索店铺
      this.shopSearchList = this.shopListData.filter(item => {
        return item.name.toLowerCase().includes(that.shopSearchVal.toLowerCase());
      });
      // 先清空搜索列表
      that.shopListData = []
      // 再添加搜索列表
      that.shopSearchList.forEach((item) => {
        this.shopListData.push(item)
      })
      // console.log('搜索列表==', that.shopListData)
    },
    // 分享至好友/群聊
    onShareAppMessage(res) {
      const userInfo = JSON.parse(uni.getStorageSync('userinfo') || '{}')
      console.log('用户信息', userInfo)
      return {
        title: '欢迎使用小程序',
        path: 'pages/index/index?shareId=' + userInfo.id,
        imageUrl: '/static/images/share.png'
      }

    },
    // 分享至朋友圈
    onShareTimeline() {},
  }
}
</script>

<style lang="scss">
  page{
    background: #F4F4F4;
  }
  .pures {
    .pures-content{
      //顶部css
      .pures-head{
        padding-bottom: 120rpx;
        border-radius: 0 0 30rpx 30rpx;
        //background: linear-gradient( 180deg, #FF6C0A 0%, #FF9841 100%);
        background: url("https://td.lszbg.com/public/uploads/code_shop/my_pures_bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        .pures-head-left{
          padding: 40rpx;
          .pures-head-title{
            line-height: 60rpx;
            display: flex;
            .pures-head-title-text{
              font-size: 30rpx;
              color: #FFFFFF;
              margin-right: 20rpx;
            }
            .pures-head-title-icon{

            }
          }
          .pures-head-num{
            font-size: 48rpx;
            color: #FFFFFF;
            font-weight: bold;
          }
        }
        .pures-head-right{
          position: absolute;
          right: 0;
          top: calc(50% - 26rpx);
          bottom: 0;
          .pures-head-right-text{
            height: 52rpx;
            line-height: 52rpx;
            font-size: 28rpx;
            color: #FE822B;
            background: rgba(255,255,255,0.8);
            padding: 0 20rpx;
            text-align: center;
            border-radius: 80rpx 0rpx 0rpx 80rpx;
          }
        }
      }
    //  钱包列表css
      .pures-list{
        padding: 30rpx;
        margin-top: -150rpx;
        z-index: 10;
        position: relative;
        .pures-list-item{
          margin-bottom: 24rpx;
          padding: 20rpx;
          background: #FFFFFF;
          border-radius: 20rpx;
          .pures-list-top{
            display: flex;
            margin-bottom: 20rpx;
            .pures-list-top-img{
              width: 80rpx;
              height: 80rpx;
            }
            .pures-list-top-text{
              padding-left: 22rpx;
              text-align: left;

              .pures-list-top-title{
                font-size: 28rpx;
                color: #3D3D3D;
                line-height: 40rpx;
              }
              .pures-list-top-word{
                font-size: 26rpx;
                color: #888888;
                line-height: 40rpx;
              }
              .pures-list-top-num{
                font-size: 36rpx;
                color: #3D3D3D;
                font-weight: bold;
                line-height: 60rpx;
              }
            }
          }
          .pures-list-bottom{
            padding: 30rpx 22rpx 10rpx 0;
            display: flex;
            justify-content: flex-end;
            .pures-list-btn{
              margin-left: 30rpx;
              padding: 12rpx 30rpx;
              border-radius: 30rpx;
              font-size: 26rpx;
            }
            .pures-btn-details{
              background: #F6F6F6;
              color: #3D3D3D;
              border: 2rpx solid #D2D2D2;
            }
            .pures-btn-cash{
              background: linear-gradient( 270deg, #FF7900 0%, #FF7900 100%);
              color: #FFFFFF;
            }
          }
        }
      //  pures-list-tab
        .pures-list-tab{
          display: flex;
          justify-content: space-between;
          background: #FFFFFF;
          padding: 30rpx;
          border-radius: 20rpx;
          .pures-list-tab-left{
            justify-content: space-between;
            width: 50%;
            background: #F6F6F6;
            padding: 20rpx 10rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            .allshop {
              .allshop-img {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
              }
            }
            /* .top_info{
              .allshop{
                width: calc(100% - 20rpx);
                view:last-child{
                  overflow: hidden;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  white-space: nowrap;
                }
              }

            } */

          }
          .pures-list-tab-right{
            width: 50%;
            background: #F6F6F6;
            padding: 20rpx 30rpx;
            border-radius: 10rpx;
            display: flex;
            justify-content: space-between;
          }


          .pures-list-tab-active{
            background: #FFF7EF;
            border: 2rpx solid #FFBB7D;
          }
        }
      //  订单列表css
        .pures-list-content{
          .m_list_wrap{
            padding-top: 30rpx;
            .m_list_item{
              margin-bottom: 24rpx;
              padding: 20rpx;
              background: #FFFFFF;
              border-radius: 20rpx;
              display: flex;
              align-items: center;
              .m_list_item_info{
                width: 70%;
                .m_head{
                  display: flex;
                  padding: 10rpx 0;
                  .m_head_img{
                    width: 30rpx;
                    height: 30rpx;
                  }
                  .m_head_text{
                    padding-left: 10rpx;
                    color: #888888;
                    font-size: 24rpx;
                  }
                }
                .m_title{
                  font-size: 28rpx;
                  color: #333333;
                  padding: 10rpx 0;
                }
                .m_time{
                  font-size: 26rpx;
                  color: #888888;
                }
              }
              .m_price{

                text-align: center;
                width: 30%;
                font-size: 32rpx;
                font-weight: bold;
                color: #FF6A00;
              }
            }
          }
        }
      }

    }
    //立即提现css
    .san_btn_wrap {
      padding: 26rpx 30rpx;
      position: absolute;
      right: 10rpx;
      top: calc(50% - 120rpx);
      z-index: 10;

      .san_btn_item {
        //display: flex;
        padding: 18rpx 50rpx;
        text-align: center;
        align-items: center;
        background: rgba(255,255,255,0.8);
        border-radius: 50rpx;
        .san-icon {
          padding: 10rpx;
        }
        text {
          font-size: 32rpx;
          color: #FE822B;
          margin-top: 12rpx;
          font-weight: 500;
        }
      }
    }
  //  问号弹窗css
    .why-box{
      padding: 40rpx;
      .why-content{
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 56rpx;
        text-align: center;
      }
      .why-btn{
        margin-top: 40rpx;
        background: linear-gradient( 104deg, #F18F2C 0%, #FF7A00 100%);
        border-radius: 50rpx;
        padding: 20rpx 0;
        text-align: center;
        text{
          font-size: 28rpx;
          color: #FFFFFF;
          text-align: center;
        }
      }
    }

  }
  //商店弹窗css
  .pop{

  }
  .pop-content {
    width: 100%;
    .pop-title {
      padding: 30rpx 30rpx 10rpx 30rpx;
      line-height: 80rpx;
      text-align: center;
      text {
        font-size: 32rpx;
        color: #333;
      }
    }
    .pop-search {
      width: 100%;
      padding: 10rpx 40rpx;
      position: relative;
      z-index: 2;
      justify-content: space-between;
      .search-button {
        width: 100rpx;
        padding: 10rpx 0;
        color: #3D3D3D;
        font-size: 28rpx;
        text-align: center;
        border-left: 1px solid #C1C1C1;
        position: absolute;
        right: 50rpx;
        top: 20rpx;
        z-index: 10;
        transition: all 1s ease;
      }
    }
    .pop-list{
      padding: 30rpx 40rpx;
      .pop-item {
        width: 100%;
        padding: 20rpx 0;
        justify-content: space-between;
        .pop-between{
          justify-content: space-between;
          .pop-item-left {
            .pop-item-left-text {
              font-size: 28rpx;
              color: #FF7A00;
            }
          }
          .pop-item-right {

            .checkIcon {
              width: 40rpx;
              height: 40rpx;
              line-height: 40rpx;
              border-radius: 50%;
              border: 1px solid #999;
              display: block;
            }

          }
        }

      }
    }
    .pop-button {
      padding: 40rpx;
      display: flex;
      justify-content: space-between;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      .submit-btn {
        flex: 1; /* 让按钮等宽 */
        margin: 0 5px; /* 添加一些外边距 */
        border: none;
        border-radius: 50rpx;
        padding: 10rpx;
      }
      .form-btn-cancel {
        background: #FFFFFF;
        border: 2rpx solid #D2D2D2;
      }

      .form-btn-cancel:after {
        border: none;
      }

      .form-btn-cancel:active {
        background: #F6F6F6;
        border: 2rpx solid #D2D2D2;
      }

      .form-btn-sumbit {
        color: #FFFFFF;
        background: #FFA853;
      }

      .form-btn-sumbit:after {
        border: none;
      }

      .form-btn-sumbit:active {
        color: #FFFFFF;
        background: #FF7900;
      }
    }



  }
</style>
